<template>
    <view class="warp">
        <!-- 导航栏 -->
        <u-navbar :is-back="false" :background="{ background: '#CA0019' }">
            <view class="header">
                <div class="item">
                    <div><image src="/static/images/scan.png" alt="" /></div>
                    扫一扫
                </div>
                <view class="search-box" @click="$u.route('pages/search/search')">
                    <u-search placeholder="输入关键字搜索" :show-action="false" :disabled="true" />
                </view>
                <div class="item">
                    <div><image src="/static/images/kefu.png" alt="" /></div>
                    客服
                </div>
            </view>
        </u-navbar>
        <!-- 下拉刷新容器 -->
        <pulldownRefresh ref="pulldownRefresh" :top="190" @refresh="refresh">
            <!-- 文章分类 -->
            <!-- <div class="stick-top">
				<u-tabs :list="categoryList" :is-scroll="categoryList.length > 7" :current="current"
					@change="changeCategory" active-color="#FF9900"></u-tabs>
			</div> -->
            <!-- 轮播图 -->
            <view class="slides-box">
                <u-swiper interval="5000" height="300" :list="slideList" title @click="clickBanner" mode="dot" indicator-pos="bottomRight" />
            </view>

            <view>
                <u-grid :border="false" col="5">
                    <u-grid-item v-for="(listItem, listIndex) in categoryList" :key="listIndex" @click="onItem(listItem.id, listIndex)">
                        <image :src="listItem.image" style="height: 50px; width: 50px;"></image>
                        <text class="grid-text">{{ listItem.name }}</text>
                    </u-grid-item>
                </u-grid>
                <u-toast ref="uToast" />
            </view>

            <view>
                <u-notice-bar :text="text1" mode="closable" speed="250" url="/pages/componentsB/tag/tag"></u-notice-bar>
            </view>

            <view class="img_top">
                <image src="https://zhengda.weihankeji.com/admin/20210824/adf2b30c0f2c24f190737596a375aeae.jpg"></image>
                <image @click="onRedpacket" src="https://zhengda.weihankeji.com/admin/20210817/6dfaf5d76f92d93cee1ec4cc17c0e09c.jpg"></image>
            </view>

            <view class="index_banner">
                <image @click="onGroup" src="https://zhengda.weihankeji.com/product/20181118/a77a0fe1a15f8b4d2c498f397a6ef536.jpg"></image>
                <image @click="onShop" src="https://zhengda.weihankeji.com/product/20210709/b4aee2c766f80fcaa13f74197f92974b.jpg"></image>
                <image @click="onBargain" src="https://zhengda.weihankeji.com/product/20210420/88ecb82f835d21058e72159a37ee91d0.jpg"></image>
            </view>

            <view class="img_top">
                <image @click="onMerchantEntering" src="https://zhengda.weihankeji.com/product/20180929/93291c5fc7ee165f790e7ad3a8b7fd5d.gif"></image>
            </view>

            <view class="tab">
                <text>-推荐商品-</text>
            </view>
            <!-- 分类文章列表 -->
            <view class="goods-list">
                <goodsItem v-for="item in articleList" :key="item.id" :item="item" />
            </view>
            <!-- 上拉加载 -->
            <u-loadmore :status="status" bg-color="#f8f8f8" margin-top="50" margin-bottom="50" @loadmore="loadMore" />
        </pulldownRefresh>
    </view>
</template>

<script>
import pulldownRefresh from "@/components/pulldownRefresh.vue";
import goodsItem from "@/components/goodsItem.vue";
export default {
    components: {
        pulldownRefresh,
        goodsItem,
    },
    data() {
        return {
            text1: "uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用",
            slideList: [],
            noticeList: [],
            categoryList: [],
            current: 0,
            currentCategory: {},
            page: 1,
            articleList: [],
            status: "loading",
        };
    },
    onLoad() {
        this.getSlides();
        this.getNotice();
        this.getCategoryList();
        this.getCategoryArticleList();
    },
    onReachBottom() {
        this.loadMore();
    },
    methods: {
        onShop() {
            this.$u.route("pages/shop_information/shop_information?id=1");
        },
        onBargain() {
            this.$u.route("pages/bargain/bargain");
        },
        onGroup() {
            this.$u.route("pages/group_buy/group_buy");
        },
        onMerchantEntering() {
            this.$u.route("pages/index/merchant_enter");
        },
        onRedpacket() {
            this.$u.route("pages/redpacket_buy/redpacket_buy");
        },
        onItem(id, index) {
            this.$u.route("pages/activity_list/activity_list?id=" + id + "&current=" + index);
        },
        refresh() {
            this.page = 1;
            this.articleList = [];
            this.getSlides();
            this.getCategoryArticleList();
        },
        loadMore() {
            if (this.status === "loadmore") {
                this.getCategoryArticleList();
            }
        },
        // 获取文章分类
        getCategoryList() {
            this.$api.get({
                url: "webapp/index/appIndex",
                data: {
                    order: "+id",
                    field: "id,name",
                },
                success: (res) => {
                    console.log(res);
                    if (res.code === "10001") {
                        this.categoryList = res.data.shopCategory;
                        // this.changeCategory(0);
                    } else {
                        this.$toast("数据获取失败");
                    }
                },
            });
        },
        // 切换分类
        changeCategory(index) {
            this.current = index;
            this.currentCategory = this.categoryList[index];
            this.page = 1;
            this.articleList = [];
            this.getCategoryArticleList();
        },
        // 获取分类下文章列表
        getCategoryArticleList() {
            this.status = "loading";
            this.$api.get({
                url: "portal/shop/recommend_list",
                data: {
                    category_id: this.currentCategory.id,
                    page: `${this.page},10`, // 一页显示10条
                    order: "-id",
                    field: "id,post_title,thumbnail,published_time,comment_count,post_hits",
                },
                success: (res) => {
                    if (res.code === "10001") {
                        let articleList = res.list;
                        this.articleList = this.articleList.concat(articleList);
                        // 分页判断
                        if (articleList.length < 10) {
                            this.status = "nomore";
                        } else {
                            this.status = "loadmore";
                            this.page++;
                        }
                    } else {
                        this.$toast("数据获取失败");
                    }
                },
                complete: () => {
                    this.$refs.pulldownRefresh && this.$refs.pulldownRefresh.endPulldownRefresh(); // 停止刷新动画
                },
            });
        },
        // 获取轮播图
        getSlides() {
            this.$api.get({
                url: "webapp/index/appIndex",
                success: (res) => {
                    if (res.code == "10001") {
                        this.slideList = res.data.ads;
                    } else {
                        this.$toast("数据获取失败");
                    }
                },
            });
        },
        getNotice() {
            this.$api.get({
                url: "portal/shop/get_notices",
                success: (res) => {
                    if (res.code == 1) {
                        this.noticeList = res.data;
                    } else {
                        this.$toast("数据获取失败");
                    }
                },
            });
        },
        // 点击轮播图，跳转页面
        clickBanner(e) {
            // this.$u.route(this.slideList[e].description);
            this.$u.route("pages/short_video/short_video");
        },
    },
};
</script>

<style lang="scss" scoped>
.slides-box {
    margin: 0rpx 10rpx 0;
    /*  #ifdef MP  */
    // margin-top: 78rpx;
    /*  #endif  */
}
.goods-list {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.tab {
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-sizing: border-box;
    height: 40px;
    line-height: 40px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}
.index_banner {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    padding: 20px 5px 5px 5px;
    background: #fff;
    background: #fff;
}
.index_banner image {
    width: 100%;
    height: 180px;
}
.img_top {
    height: 90px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 5px 5px 5px;
    background: #fff;
}
.img_top a {
    width: calc(50% - 2px);
}
.img_top image {
    width: 100%;
    height: 90px;
    border-radius: 6px;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    padding: 0 30rpx;
    font-size: 20rpx;
    /*  #ifndef MP  */
    flex: 1; // 小程序不设置flex:1，避免被右上角的胶囊遮挡
    /*  #endif  */
    .logo {
        margin-left: 2rpx;
        font-size: 12rpx;
        font-weight: bold;
    }
	.item{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
    image {
        width: 30rpx;
        height: 30rpx;
    }
    .search-box {
        flex-grow: 1;
        margin: 0 20rpx;
    }
}

.stick-top {
    position: fixed;
    top: 0;
    width: 750rpx;
    z-index: 999;
}
</style>
